<template>
  <div>
    <h1>Risk Predictions</h1>
    <form @submit.prevent="createRiskPrediction">
      <div>
        <label for="riskType">Risk Type:</label>
        <input type="text" v-model="riskType" required />
      </div>
      <div>
        <label for="riskLevel">Risk Level:</label>
        <input type="text" v-model="riskLevel" required />
      </div>
      <button type="submit">Create</button>
    </form>
  </div>
</template>

<script>
import api from '@/services/api';

export default {
  name: 'RiskPredictions',
  data() {
    return {
      riskType: '',
      riskLevel: '',
    };
  },
  methods: {
    async createRiskPrediction() {
      try {
        const riskPredictions = {
          userId: this.$store.getters.user.id,
          date: new Date().toISOString().split('T')[0],
          riskType: this.riskType,
          riskLevel: this.riskLevel,
        };
        await api.createRiskPrediction(riskPredictions);
        alert('Risk prediction created successfully');
      } catch (error) {
        console.error('Error creating risk prediction:', error);
      }
    },
  },
};
</script>
